<template>
  <div class="icon-1">
    <div class="home-1-co4" v-for="(item, index) in arr" :key="index">
      <div>
        <span class="insd-1"><van-icon name="stop" /></span
        >{{ item.useLastTime }}
      </div>
      <img :src="item.iconUrl" class="imgs-1" />
      <div class="home-1-co5">{{ item.appName }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { getRecent } from '@/utils/Commonmethod'

const arr: any = ref([])
onMounted(async () => {
  arr.value = await getRecent({ pageNum: 1, pageSize: 99 })
})
</script>

<style lang="scss" scoped>
.icon-1 {
  width: 100%;
  height: 70px;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.home-1-co4 {
  width: 90px;
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.home-1-co5 {
  width: 100%;
  text-align: center;
  font-weight: 400;
  font-size: 13px;
  color: #333333;
}
.imgs-1 {
  width: 40px;
  height: 40px;
}
.insd-1 {
  font-size: 14px;
  color: #3781f6;
}
</style>
